<template>
    <view>
        <view class="calendar">
			<view class="calendar-top">
				<view class="left_cal" @click="preNextDate(0)">
					<u-icon name="arrow-left"></u-icon>
					{{ monthShow ? '上一月' : '上一周' }}
				</view>
				<view>{{year}}年{{month}}月</view>
				<view class="right_cal" @click="preNextDate(1)">
					{{ monthShow ? '下一月' : '下一周' }}
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="calendar-bottom">
				<view class="week-item" v-for="(item,index) in weekList" :key="index">
					{{item}}
				</view>
				<view 
					v-for="(item, index) in everyDay" 
					:key="item.day" 
					class="day-box flex-center" 
					:class="nowDay > item.date ? 'grayDate' : ''" 
					v-if="monthShow">
					<view 
						class="day-item"
						:class="{ 
							'daySelect': selectDay == item.date,
							'start-end': startDate <= item.date && endDate >= item.date,
							'is_work':item.workdate&&item.iswork,
							'no_work':item.workdate&&!item.iswork,}"
						@click="changeDate(item)">
						{{ nowDay == item.date ? '今日' : item.day }}
					</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
		props:{
			startDate:{
				type:String,
				default:''
			},
			endDate:{
				type:String,
				default:''
			},
			workLogList:{
				type:Array,
				default:[]
			}
		},
        data() {
            return {
				weekList: ['日', '一', '二', '三', '四', '五', '六'],
                monthShow: true,
                year: 0,
				month: 0,
				day: 0,
				week: '',
                nowDay: '',
				selectDay: '',
                everyDay: []
            }
        },
		 watch:{
			startDate:{
		        handler(val){
		          if(val){
		            console.log(val,'startDate：val');
					this.year = val.slice(0,4)
					this.month = parseInt(val.slice(5,7))
					this.day = parseInt(val.slice(8,10))
					if(uni.getSystemInfoSync().platform == 'ios'){
						this.getEveryDay(this.year + '/' + this.month + '/' + this.day);
					}else{
						this.getEveryDay(this.year + '-' + this.month);
					}
		          }
		        }
			},
			workLogList:{
				handler(arr){
					if(arr.length){
						if(uni.getSystemInfoSync().platform == 'ios'){
							this.getEveryDay(this.year + '/' + this.month + '/' + this.day);
						}else{
							this.getEveryDay(this.year + '-' + this.month);
						}
					}
				}
			}
		},
        mounted() {
            this.year = Number(this.getNowTime(new Date(), 2).slice(0, 4));
			this.month = Number(this.getNowTime(new Date(), 2).slice(5, 7));
			this.day = Number(this.getNowTime(new Date(), 2).slice(8, 10));
			this.nowDay = this.getNowTime(new Date())
			this.selectDay = this.getNowTime(new Date())
			if(uni.getSystemInfoSync().platform == 'ios'){
				this.getEveryDay(this.year + '/' + this.month + '/' + this.day);
			}else{
				console.log('年月',this.year + '-' + this.month)
				this.getEveryDay(this.year + '-' + this.month);
			}
        },
        methods: {
            // 获取当前日期
            getNowTime(time, type) {
				var date = time,
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					month >= 1 && month <= 9 ? (month = "0" + month) : "";
					day >= 0 && day <= 9 ? (day = "0" + day) : "";
					if (type == 1) {
						if(uni.getSystemInfoSync().platform == 'ios'){
							var timer = 
								year + '/' + month + '/' + day + 
								' ' + hour + ':' + minute + ':' + second;
						}else{
							var timer = year + '-' + month + '-' + day + 
							' ' + hour + ':' + minute + ':' + second;
						}
					} else {
						var timer = year + '/' + month + '/' + day;
					}
				
				return timer;
			},
            // 遍历月份日期
			getEveryDay(data) {
				let date = new Date(data);
				console.log('getEveryDay',date)
				let month = date.getMonth();
				//设置月份
				date.setMonth(month + 1);
				//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环
				date.setDate(0);
				let dayArry = [];
				let day = date.getDate(); //获取当前月最后一天是几号
				for (let i = 1; i <= day; i++) {
					date.setDate(i); //如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天
					dayArry.push({ day: i, week: this.getWeekday(date.getDay()), date: this.getNowTime(date) }); //选中月份的每一天和当天是星期几
				}
				
				console.log('work~~~~~~~~~~list',this.workLogList)
				dayArry.forEach(item=>{
					let workList = this.workLogList
					let isFind = workList.findIndex(fi=>fi.workdate.replace(' 00:00:00','').split('-').join('/') == item.date)
					if(isFind>-1){
						let curwork = workList[isFind]
						for(let key in curwork){
							item[key] = curwork[key]
						}
					}
				})
	
				this.everyDay = dayArry;
				console.log('everyDay~~~~~~~',this.everyDay)
				this.resetDay();
			},
            getWeekday(day) {
				return ['日', '一', '二', '三', '四', '五', '六'][day];
			},
			//重置日期与顶部周期相对应
			resetDay() {
				let arr = this.weekList;
				let w = this.everyDay[0]?.week;
				arr.forEach((v, index) => {
					if (v == w) {
						let id = index;
						if (id != 0) {
							for (let i = 0; i < id; i++) {
								this.everyDay.unshift({ day: '', week: '' });
							}
						}
					}
				});
			},
            // 切换上一周月、下一周月
            preNextDate(e){
				if(this.monthShow){
					if(e){
						// 下一月
						this.month += 1;
						if (this.month > 12) {
							this.year += 1;
							this.month = 1;
						}
						if(uni.getSystemInfoSync().platform == 'ios'){
							this.getEveryDay(this.year + '/' + this.month + '/' + 1);
						}else{
							this.getEveryDay(this.year + '-' + this.month);
						}
					}else{
						// 上一月
						this.month -= 1;
						if (this.month == 0) {
							this.year -= 1;
							this.month = 12;
						}
						if(uni.getSystemInfoSync().platform == 'ios'){
							this.getEveryDay(this.year + '/' + this.month + '/' + 1);
						}else{
							this.getEveryDay(this.year + '-' + this.month);
						}
					}
				}
			},
			// 选中日期
			changeDate(item){
				if(item.date<this.startDate) return
				this.$emit('handleSelectDay',item)
				let { date } = item
				if(this.nowDay <= date ){
					this.year = Number(date.slice(0, 4));
					this.month = Number(date.slice(5, 7));
					this.day = Number(date.slice(8, 10));
					this.selectDay = date
				}
			},
        }
    }
</script>
 
<style scoped lang="scss">
    view{
		box-sizing: border-box;
	}
	.calendar{
		padding: 0 8rpx;
		
		.calendar-top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: rgba(35, 39, 115, .3);
			border-radius: 10px 10px 0 0;
			height: 109rpx;
			font-size: 27rpx;
			font-weight: 500;
			
			view:nth-child(2){
				font-size: 31rpx;
			}
			.left_cal{
				margin-left: 5px;
				display: flex;
			}
			.right_cal{
				display: flex;
			}
		}
		
		.calendar-bottom{
			display: flex;
			flex-wrap: wrap;
			padding: 33rpx 0;
			height: auto;
			background: rgba(35, 39, 115, .1);
			border-radius:0 0 20rpx 20rpx;
			position: relative;
			
			.week-item{
				width: 14%;
				text-align: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}
			
			.day-box{
				width: 14%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.day-item{
					font-size: 29rpx;
					font-weight: 500;
					color: #000000;
					.day-point-cur{
						width: 80rpx;
						height: 80rpx;
						text-align: center;
						line-height: 80rpx;
						background: #45CFF5;
						font-size: 29rpx;
						font-weight: 500;
						color: #FFFFFF;
						border-radius: 50%;
					}
				}
				
				.daySelect{
					width: 80rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background: #45CFF5;
					font-size: 29rpx;
					font-weight: 500;
					color: #FFFFFF;
					border-radius: 50%;
				}
				.start-end{
					width: 80rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background: rgba(35, 39, 115, .2);
					font-size: 29rpx;
					font-weight: 500;
					color: #FFFFFF;
					border-radius: 50%;
				}
				.no_work{
					background: rgba(235, 57, 65, .6);
				}
				.is_work{
					background: rgba(35, 39, 115, .7);
				}
			}
			
			.grayDate{
				.day-item{
					color: #999999;
					
					.day-point{
						background: #CCCCCC;
					}
				}
			}
		}
	}
</style>